import React, { useState, useEffect } from 'react';
import { connect } from 'umi';
import { Form, Row, Col, Select, Table, Modal, Space } from 'antd';
import { listAllBySiteID } from './setServers';
import { selectOption } from './SettingGlobal';

const SystemSet = (props: any) => {
  const [mainForm] = Form.useForm();
  const { dvaData } = props;
  console.log('系統資訊設定 props', props);

  const [typeBuildData, setTypeBuildData] = useState([]);

  /* 根据选择的site 渲染不同的build */
  const getBuildType = (params: any) => {
    listAllBySiteID(params).then((res: any) => {
      console.log('查询 建物资讯 是否成功', res);
      res && setTypeBuildData(res['data']);
      // mainForm.resetFields();
      mainForm.setFieldsValue({ ID: '' });
    });
  };

  useEffect(() => {}, []);

  return (
    <>
      <h2>系統資訊設定</h2>
      <Form form={mainForm} name="mainForm" autoComplete="off">
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item>
              <Select onChange={(val: string) => getBuildType({ siteId: val })}>
                {dvaData['facListAll'].length &&
                  selectOption(dvaData['facListAll'], 'siteid', 'ename')}
              </Select>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="ID">
              <Select
                value=""
                onChange={(val: string) => {
                  console.log('厂别选择', val);
                }}
              >
                {selectOption(typeBuildData, 'ID', 'NAME')}
              </Select>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </>
  );
};

/* 挂载 到仓库中 */
const mapStateToProps = (state: any) => ({
  dvaData: state.setting,
});

export default connect(mapStateToProps)(SystemSet);
